/**
 * Created by zzy on 2017/8/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    Animated,
    Dimensions
} from 'react-native';
import ScrollableTabView from 'react-native-scrollable-tab-view';
import Ionicons from 'react-native-vector-icons/Ionicons'
import WaterTiketList from './WaterTiketList'

let ScreenHeight = Dimensions.get('window').height;
let ScreenWidth = Dimensions.get('window').width;
const SelectView = React.createClass({
    propType: {
        goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
        tabStyle: View.propTypes.style,
        underlineStyle: View.propTypes.style,
    },
    render(){
        const backS = {
            flexDirection:'row',
            justifyContent:'space-between',
            height:40,
            alignItems:'center'
        };
        const btnS = {
            height:35,
            width:ScreenWidth/3,
            justifyContent:'center',
            alignItems:'center'
        };
        const tabUnderlineStyle = {
            position: 'absolute',
            width: ScreenWidth/3,
            height: 3,
            backgroundColor: '#4dc0ff',
            bottom: 0,
            borderRadius:1.5,
        };
        const left = this.props.scrollValue.interpolate({
            inputRange: [0, 1, ], outputRange: [0, ScreenWidth/3, ],
        });
        return <View style={backS}>
            {this.props.tabs.map((tab, i)=> {
                let textColor = this.props.activeTab==i ? '#4dc0ff' : '#333333';
                return <TouchableOpacity style={btnS}
                                         activeOpacity={1}
                                         onPress={()=>{
                                             this.props.goToPage(i)
                                         }}
                                         key={tab}>
                    <Text style={{color:textColor}}>{tab}</Text>
                </TouchableOpacity>
            })}
            <Animated.View style={[tabUnderlineStyle, { left, }]} />
        </View>
    }
});

export default class MineWaterTikets extends Component{
    static navigationOptions = {
        title: '水票'
    };

    render(){
        const {goBack} = this.props.navigation;
        return <View style={{flex:1,backgroundColor:'#f5f5f5'}}>
            <ScrollableTabView initialPage={0}
                               style={{height:90,backgroundColor:'#f5f5f5'}}
                               renderTabBar={()=> <SelectView />}
                               tabBarActiveTextColor='#4dc0ff'
                               tabBarInactiveTextColor='#333333'
                               tabBarUnderlineStyle={{backgroundColor:'#4dc0ff',height:2,width:10}}>
                <WaterTiketList
                    filter='未使用'
                    tabLabel="未使用"
                    navigate={this.props.navigation.navigate}/>
                <WaterTiketList
                    filter='已使用'
                    tabLabel="已使用"
                    navigate={this.props.navigation.navigate}/>
                <WaterTiketList
                    filter='已过期'
                    tabLabel="已过期"
                    navigate={this.props.navigation.navigate}/>
            </ScrollableTabView>
            </View>

    }
}